<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSDB Perfromance</title>
    <script type="text/javascript" src="../static/echarts.js"></script>
    <script type="text/javascript" src="../static/shine.js"></script>

</head>
<body style="background: #f3f3f3">

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="height:430px;border:1px solid #ccc;padding: 10px;"></div>
<div id="main2" style="height:440px;border:1px solid #ccc;padding: 10px;"></div>
<script type="text/javascript">
    var dataShadow = [], yMax = 40;
    var dataAxis =
    {{ threadInfo['names']|tojson }}
    var data =
    {{ threadInfo['speeds']|tojson }}

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'shine');
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'SSDB Performance',
            subtext: 'Per Thread Performance'
        },
        tooltip: {
            show: true,
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['Thread Speed Bar', 'Thread Speed Line']
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#3f2155'
                },

            },
            data: dataAxis,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { // For shadow
                type: 'bar',
                itemStyle: {
                    normal: {color: 'rgba(0,0,0,0.05)'}
                },
                barGap: '-100%',
                barCategoryGap: '60%',
                data: dataShadow,
                animation: false
            },
            {
                name: 'Thread Speed Bar',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]
                        )
                    }
                },
                data: data
            },
            {
                name: 'Thread Speed Line',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            1, 0, 0, 0,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            1, 0, 0, 0,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]
                        )
                    }
                },
                data: data
            }
        ]
    };

    for (var i = 0; i < data.length; i++) {
        dataShadow.push(40);
    }

    var zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    var dataShadow2 = [], yMax2 = 40;
    var dataAxis2 =
    {{ threadInfo2['names']|tojson }}
    var data2 =
    {{ threadInfo2['speeds']|tojson }}

    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'), 'shine');
    // 指定图表的配置项和数据
    var option2 = {
        title: {
            text: 'SSDB Performance',
            subtext: 'Per Insert 2kw Performance'
        },
        tooltip: {show: true},
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['Thread Speed Bar', 'Thread Speed Line']
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#0a0b44'
                },
{#                interval: 0,#}
{#                rotate: 45,//倾斜度 -90 至 90 默认为0#}
            },
            data: dataAxis2,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { // For shadow
                type: 'bar',
                itemStyle: {
                    normal: {color: 'rgba(0,0,0,0.05)'}
                },
                barGap: '-100%',
                barCategoryGap: '40%',
                data: dataShadow2,
                animation: false
            },
            {
                name: 'Thread Speed Bar',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#ee82ee'},
                                {offset: 0.5, color: '#ff1493'},
                                {offset: 1, color: '#ff1493'}
                            ]
                        ),
                        label: {
                            show: true,//是否展示
                            textStyle: {
                                fontSize: '12',
                                fontFamily: '微软雅黑'
                            }
                        }
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#ff1493'},
                                {offset: 0.7, color: '#ff1493'},
                                {offset: 1, color: '#ee82ee'}
                            ]
                        )
                    }

                },
                data: data2
            },
            {
                name: 'Thread Speed Line',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {offset: 0, color: '#ee82ee'},
                                {offset: 0.5, color: '#ff1493'},
                                {offset: 1, color: '#ff1493'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            1, 0, 0, 0,
                            [
                                {offset: 0, color: '#ff1493'},
                                {offset: 0.7, color: '#ff1493'},
                                {offset: 1, color: '#ee82ee'}
                            ]
                        )
                    }
                },
                data: data2
            }
        ]
    };

    for (var i = 0; i < data2.length; i++) {
        dataShadow2.push(40);
    }

    var zoomSize2 = 6;
    myChart2.on('click', function (params) {
        console.log(dataAxis2[Math.max(params.dataIndex - zoomSize2 / 2, 0)]);
        myChart2.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis2[Math.max(params.dataIndex - zoomSize2 / 2, 0)],
            endValue: dataAxis2[Math.min(params.dataIndex + zoomSize2 / 2, data2.length - 1)]
        });
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
</script>
</body>
</html>